<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
一.标&nbsp;&nbsp;&nbsp;&nbsp;签<br>
1.标题<br>
<h1>今天学HTML</h1>
<h2>今天学HTML</h2>
<h3>今天学HTML</h3>
<h4>今天学HTML</h4>
<h5>今天学HTML</h5>
<h6>今天学HTML</h6>
2.段落<br>
<p>p标签是paragraph缩写，段落。并没有啥特殊效果，只是在代码阅读时，告诉你是一个段落</p>
3.超连接/锚点<br>
<a href="index.html">跳转</a>
<a href="./index.html">跳转</a>
4.图像<br>
<img src="./Koala.jpg" width="200" height="150">  <!--只有头标签，没有尾标签的标签叫自关闭元素 -->
<br>
5.列表<br>
列表：很多元素集合<br>
<ul>
    <li>html</li>
    <li>js</li>
    <li>css</li>
</ul>
6.表格<br>
<table  border="1" ><!-- 表格-->
    <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    <tr><th>1</th><td colspan="2">张三</td>      </tr> <!--column需要跨列的td设置属性colspan ，数值是跨的列数-->
    <tr><th>2</th><td rowspan="2">李四</td><td>25</td></tr><!--row需要跨列的td设置属性rowspan ，数值是跨的行数-->
    <tr><th>3</th>             <td>25</td></tr>
</table>

7.块<br>
<div>div是块级元素。没有什么特殊效果。<br>
    写代码时候划分一个区域，你可以认为相当于JAVA新建了一个类。<br>
    块级元素会在前后显示折行。<br></div>
8.内联元素（配合div使用）<br>
<span>我是内联元素</span>

<div style="width:500px;">
    <div id="div1" style="background-color:#FFA500">
        <h1>我是来测试的1</h1>
    </div>
    <div id="div2" style="background-color:#FFD700;height: 200px;float: left;width: 400px"></div>
    <div id="div3" style="background-color:#FFFFAA;height: 200px;float: left;width: 100px"></div>
</div>
<!-- html每个元素都有两个属性叫id和name。
 id相当于元素的身份证，name相当于元素的名字。
 DOM会说。
 元素还有个叫class。相当于种族。配合CSS。
 元素的css写法  a.css   ->  table {backgroud-color:red}    .t2{backgroud-color:green}

<br>
9.表单<br><!--最最最重要的东西！你可以认为你去政府办事填的各种单据。本质就是前端向后端提交的一份数据-->
<form id="form1" name="form1" action="index.html"> <!--action是form专有的跳转连接地址-->
    <!--from特性/运行机制：会把form标签内的所有带name属性的input组件的值传到action的地址去-->
    文本域：<input type="text" name="inTxt"><br>
    密码:<input type="password" name="inPwd"><br>
    单选按钮：<input type="radio" name="inSex" value="男">男<input type="radio" name="inSex" value="女">女<br>
    <!-- 如果是同一组的单选按钮，那么必须有name属性，且name必须相同；必须有value属性，最后传入的值就是value-->
    复选框：<input type="checkbox" name="inCbx" value="初级">初级<input type="checkbox" name="inCbx" value="中级">中级
    <input type="checkbox" name="inCbx" value="高级">高级<br>
    <!-- 如果是同一组的多选按钮，那么必须有name属性，且name必须相同；必须有value属性，最后传入的值就是value-->
    隐藏域：<input type="hidden" name="inHid" value="我隐藏了"><br>
    重置：<input type="reset" name="inSub" value="提交数据"><br>
    提交form：<input type="submit" name="inSub" value="提交数据"><br>
</form>
</body>
</html>